<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="用户优惠券">
            <!-- 按钮 -->
            <el-button
              size="small"
              type="primary"
              @click="UserdialogVisible = true"
              >新增</el-button
            >
            <!-- 表格 -->
            <el-table :data="UsertableData">
              <el-table-column label="序号" type="index" show-overflow-tooltip width="50"></el-table-column>
              <el-table-column label="用户名id" prop="userId" />
              <el-table-column label="优惠券名称" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="图片url" prop="img" />
              <el-table-column label="优惠券金额" prop="amount" />
              <el-table-column label="优惠券状态" prop="status" />
              <el-table-column label="领取时间" prop="collectionTime" />
              <el-table-column label="绝对时效" prop="absoluteValid" />
              <el-table-column label="相对时效" prop="relativeValid" />
              <el-table-column label="类型" prop="type" />
              <el-table-column label="积分兑换" prop="source" />
              <el-table-column label="操作"  width="200">
                <template slot-scope="scope" fixed="right" >
                  <el-button
                    size="small"
                    type="primary"
                    @click.stop="UserhandleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click.stop="UserhandleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="公共优惠券">
            <el-button size="small" type="primary">新增</el-button>
            <!-- 表格 -->
            <el-table :data="PublictableData">
              <el-table-column label="序号" type="index" show-overflow-tooltip width="50"></el-table-column>
              <el-table-column label="优惠券名称" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="图片url" prop="img" />
              <el-table-column label="优惠券金额" prop="amount" />
              <!-- <el-table-column label="优惠券金额" prop="content" /> -->
              <el-table-column label="优惠券状态" prop="status">
                <template slot-scope="scope">
                  <p>有效</p>
                </template>
              </el-table-column>
              <el-table-column label="绝对时效" prop="absoluteValid" />
              <el-table-column label="相对时效" prop="relativeValid" />
              <el-table-column label="积分兑换" prop="integral" />
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click.stop="pubhandleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click.stop="pubhandleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 用户优惠卷新增---弹框 -->
    <el-dialog title="收货地址" :visible.sync="UserdialogVisible" width="40%">
      <el-form :model="userform">
        <el-form-item label="用户id" :label-width="formLabelWidth">
          <el-input
            v-model="userform.userId"
            autocomplete="off"
            placeholder="只能填写整数"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <el-input v-model="userform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
            v-model="userform.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片url" :label-width="formLabelWidth">
          <el-input v-model="userform.img" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠金额" :label-width="formLabelWidth">
          <el-input v-model="userform.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券状态" :label-width="formLabelWidth">
          <el-select v-model="userform.status" placeholder="请选择活动区域">
            <el-option label="有效" value="true"></el-option>
            <el-option label="失效" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="userform.collection_time"
            align="right"
            type="date"
            placeholder="选择日期"
            
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="绝对时效" :label-width="formLabelWidth">
          <el-date-picker
            v-model="userform.absolute_valid"
            align="right"
            type="date"
            placeholder="选择日期"
           
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="相对时效" :label-width="formLabelWidth">
          <el-input v-model="userform.relative_valid"></el-input>
          <!--  <el-date-picker
            v-model="userform.relative_valid"
            align="right"
            type="date"
            placeholder="选择日期"
            
          >
          </el-date-picker> -->
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="userform.type" placeholder="请选择活动区域">
            <el-option label="满减卷" value="满减卷"></el-option>
            <el-option label="无门栏券" value="无门栏券"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源" :label-width="formLabelWidth">
          <el-input v-model="userform.source" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="UserdialogSubmit"
          >添加</el-button
        >
      </div>
    </el-dialog>

    <!-- 用户优惠卷--修改 -->
    <el-dialog title="收货地址" :visible.sync="UserUpdatedialog" width="40%">
      <el-form :model="userUpdateform">
        <el-form-item label="用户id" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.userId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠名称" :label-width="UpdatedWidth">
          <el-input v-model="userUpdateform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片url" :label-width="UpdatedWidth">
          <el-input v-model="userUpdateform.img" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠金额" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.amount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券状态" :label-width="UpdatedWidth">
          <el-select
            v-model="userUpdateform.status"
            placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取时间" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.collection_time"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="绝对时效" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.absolute_valid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="相对时效" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.relative_valid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="UpdatedWidth">
          <el-select v-model="userUpdateform.type" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源" :label-width="UpdatedWidth">
          <el-input
            v-model="userUpdateform.source"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="UserupdatedialogSubmit"
          >提交修改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectCoupon,
  selectPublicCoupon,
  insertCoupon,
  deleteCoupon,
  deletePublicCoupon,
  updateCoupon,
} from "@/api/article";
export default {
  data() {
    return {
      //用户优惠卷--id
      userrowid: "",

      //用户优惠卷--表格
      UsertableData: [],

      //公共优惠卷--表格
      PublictableData: [],

      //用户优惠卷---新增弹框
      UserdialogVisible: false,
      userform: {
        userId: "",
        name: "",
        description: "",
        img: "",
        amount: "",
        status: [],
        collection_time: "",
        absolute_valid: "",
        relative_valid: "",
        type: "",
        source: "",
      },
      formLabelWidth: "120px",

      //用户优惠卷---修改弹框
      UserUpdatedialog: false,
      userUpdateform: {
        userId: "",
        name: "",
        description: "",
        img: "",
        amount: "",
        status: [],
        collection_time: "",
        absolute_valid: "",
        relative_valid: "",
        type: "",
        source: "",
      },
      UpdatedWidth: "120px",

      dialogVisible: false,
      // 分页数据
      currentPage: 1,
      list: [],
      showDialog: false,
      formData: {
        id: "",
        content: "",
        type: "",
      },
      loading: false,
      permissionData: [], // 存放用于展示的权限列表数据 (树形结构)
    };
  },

  methods: {
    //1.查询用户优惠卷
    async getCoupon() {
      const data = await selectCoupon({});

      console.log("查询用户优惠卷", data);
      this.UsertableData = data;
    },

    //查询公共优惠卷
    async getPublicCoupon() {
      const data = await selectPublicCoupon({});

      console.log("查询公共优惠卷", data);
      this.PublictableData = data;
    },

    //用户优惠卷添加---提交
    async UserdialogSubmit() {
      this.UsertableData = false;

      const data = await insertCoupon({
        userId: this.userform.userId,

        name: this.userform.name,

        description: this.userform.description,

        img: this.userform.img,

        amount: this.userform.amount,

        status: this.userform.status,

        collectionTime:Number(this.userform.collection_time) ,

        absoluteValid:Number( this.userform.absolute_valid),

        relativeValid: this.userform.relative_valid,

        type: this.userform.type,

        source: this.userform.source,
      });
      console.log("添加", data);
    },

    //用户优惠卷编辑修改---提交
    async UserupdatedialogSubmit() {
      const data = await updateCoupon({
        id: this.userrowId,
        userId: this.userUpdateform.userId,
        name: this.userUpdateform.name,
        description: this.userUpdateform.description,
        img: this.userUpdateform.img,
        amount: this.userUpdateform.amount,
        status: this.userUpdateform.status,
        collectionTime: this.userUpdateform.collection_time,
        absoluteValid: this.userUpdateform.absolute_valid,
        relativeValid: this.userUpdateform.relative_valid,
        type: this.userUpdateform.type,
        source: this.userUpdateform.source,
      });

      console.log("用户优惠卷编辑", data);
    },

    //用户优惠卷--编辑
    UserhandleEdit(index, row) {
      console.log("index,row", index, row);
      this.userrowId = row.id;
      this.UserUpdatedialog = true;
      //   const data = await updateCoupon({});
    },

    //用户优惠卷--删除
    UserhandleDelete(index, row) {
      console.log("row.id", row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteCoupon({
            id: row.id,
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });

          this.getCoupon();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //公共优惠卷--编辑
    pubhandleEdit(index, row) {
      console.log("index,row", index, row);
    },

    //公共优惠卷--删除
    pubhandleDelete(index, row) {
      console.log("row.id", row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deletePublicCoupon({
            id: row.id,
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });

          this.getPublicCoupon();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    //查询用户优惠卷
    this.getCoupon();

    //查询公共优惠卷
    this.getPublicCoupon();
  },
};
</script>

<style>
</style>